<template>
  <!-- 我的申请 -->
  <div class="app-container">
    <div class="app-wrap" style="height: 100%;">
      <search-table ref="table" :table-loading="listLoading" :table-data="resourceDataList" @query="getResourceList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="审核状态:" label-width="80px">
            <el-select v-model="listQuery.check_status" placeholder="请选择审核状态" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in statusData" :key="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期时间:" label-width="80px">
           <el-date-picker is-range v-model="listQuery.dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions >
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getResourceList">刷新</el-button> 
        </template>
        <template>
          <el-table-column prop="effect_time_str" label="邮件展示时间" align="center" width="200"/>
          <el-table-column prop="apply_id" label="申请人" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ $public.accountLabel(scope.row.apply_id) }}<span v-show="scope.row.apply_id">【{{scope.row.apply_id}}】</span></span>
            </template>
          </el-table-column>
          <el-table-column prop="user_id" label="用户ID" align="center" width="120"/>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="check_status" label="申请状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="applyType(scope.row.check_status)">{{ applyStatus(scope.row.check_status)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="send_status" label="发送状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.send_status==0?'':scope.row.send_status==1?'primary':scope.row.send_status==2?'success':'info'">{{ sendStatus(scope.row.send_status)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="item_content" label="道具" align="center" width="350">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.propData" :key="index">
                {{ item.label }}【<span class="colorRed">{{ item.num }}</span>】
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" align="center" width="300" show-overflow-tooltip/>
          <el-table-column prop="content" label="内容" align="center" width="300" show-overflow-tooltip/>
          <el-table-column prop="reason" label="申请理由" align="center" width="200" show-overflow-tooltip/>
          <el-table-column prop="check_reason" label="审核理由" align="center" width="200"/>
          <el-table-column prop="created_at" label="申请时间" align="center" width="200"/>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getResourceList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getApply
} from '@/api/player'

import SearchTable from '@/components/SearchTable'
export default {
  name: 'application',
  components: {
    SearchTable
  },
  data () {
    return {
      isShowDetails: false,
      checkedItem: null,
      listLoading: true,
      resourceDataList: [],
      listQuery: {
        page: 1,
        size: 50,
        check_status:-1,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      currentTotal: 0,
      propData: this.$store.state.commonState.propDataArray,
      statusData:[
        {label:'全部',value:-1,type:''},
        {label:'待审核',value:0,type:'primary'},
        {label:'通过',value:1,type:'success'},
        {label:'不通过',value:2,type:'info'},
      ],
      sendStatusData:[
        {label:'默认',value:0,type:''},
        {label:'发送中',value:1,type:'primary'},
        {label:'发送成功',value:2,type:'success'},
        {label:'发送失败',value:2,type:'info'},
      ]
    }
  },
  created () {
    // this.getResourceList();
  },
  activated () {
    this.propData=this.$store.state.commonState.propDataArray
    this.getResourceList();
  },
  methods: {
    // 查询
    async getResourceList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.resourceDataList = [];
      that.checkedItem = null;
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }
      const response = await getApply(params)
      if (response.code == 1) {
        if (response.data.list) {
          response.data.list.forEach(item=>{
            item.propData=that.propBack(item.item_content)
          })
          that.resourceDataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 申请状态
    applyStatus(cellValue){
      return (this.statusData.find((item) => item.value === cellValue)?.label || "-");
    },
    applyType(cellValue){
      return (this.statusData.find((item) => item.value === cellValue)?.type || "-");
    },
    sendStatus(cellValue){
      return (this.sendStatusData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 转化道具
    propBack (str) {
      let arr = this.$public.srtToArr(str), arrData = [];
      if (arr[0] && typeof (arr[0]) == 'string') {
        this.propData.map(item=>{
          if(item.value==arr[0]){
            arrData.push({ label: item.label, num: this.$public.mathNumberDivideWan(Number(arr[1]))})
          }
        })
      } else {
        arr.map(item => {
          this.propData.map(second=>{
            if(second.value==item[0]){
              arrData.push({ label: second.label, num: this.$public.mathNumberDivideWan(Number(item[1]))})
            }
          })
        })
      }
      return arrData
    },
    // 关闭
    handleClose(){
      this.isShowDetails=false
      this.reason=''
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        check_status:-1,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      this.getResourceList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.statistic{
  font-size: 18px;
  font-weight: 600;
  p{
    margin-right: 20px;
    span{
      font-size: 16px !important;
    }
  }
}
</style>
